﻿<html>
<head>
    <title>Anotador</title>
    <style type="text/css">
        .hide
        {
            display: none;
        }
    </style>
    <script type="text/javascript" language="javascript">

        function addPlayer() {

            var name = document.getElementById("PlayersName").value;
            var team = document.getElementById("PlayersTeam").value;
            if (name != "" && name != undefined && team != "" && team != undefined) {
                if (team != document.getElementById("Team1Name").value && team != document.getElementById("Team2Name").value)
                    return;

                var canhoto = document.getElementById("cbPlayerLeftFoot").checked;

                var playerText = name + "-" + team;
                playerText += canhoto ? "-L" : "-R";

                document.getElementById("playersList").innerHTML += "<li>" + playerText + "<ol id='" + name + "EventList'" + "> </ol>" + "</li>";

                if (document.getElementById("hiddenPlayersList").value != "" && document.getElementById("hiddenPlayersList").value != undefined) {
                    document.getElementById("hiddenPlayersList").value += "#";
                }
                else {
                    document.getElementById("hiddenPlayersList").value = "";
                }

                var playerValue = "Nome:" + name + ";" + "Team:" + team + ";" + "Canhoto:" + (canhoto ? "L" : "R") + ";";

                document.getElementById("hiddenPlayersList").value += playerValue;

                //Limpar os inputs
                document.getElementById("PlayersName").value = "";
                document.getElementById("PlayersTeam").value = "";
                document.getElementById("cbPlayerLeftFoot").checked = false;
            }

        }

        function addEvent() {

            var name = document.getElementById("PlayersName").value;
            var team = document.getElementById("PlayersTeam").value;
            if (name != "" && name != undefined && team != "" && team != undefined && document.getElementById(name + "EventList") != undefined) {
                if (team != document.getElementById("Team1Name").value && team != document.getElementById("Team2Name").value)
                    return;

                var marcaGolo = document.getElementById("cbGoal").checked;
                var festeja = document.getElementById("cbCellebration").checked;

                var fazCorte = document.getElementById("Tackle").value;
                var bateBolaParada = document.getElementById("SetPieces").value;
                var fazFalta = document.getElementById("Fault").value;
                var remata = document.getElementById("Shooting").value;
                var zonaCampo = document.getElementById("EventPlace").value;

                //adicionar info do evento ah lista de eventos do jogador actual
                var eventText = "";

                if (marcaGolo)
                    eventText += "-Golo";
                if (festeja)
                    eventText += "-Festeja";

                if (fazCorte != "" && fazCorte != undefined)
                    eventText += "-" + fazCorte;

                if (bateBolaParada != "" && bateBolaParada != undefined)
                    eventText += "-" + bateBolaParada;

                if (fazFalta != "" && fazFalta != undefined)
                    eventText += "-" + fazFalta;

                if (remata != "" && remata != undefined)
                    eventText += "-" + remata;

                if (zonaCampo != "" && zonaCampo != undefined)
                    eventText += "-" + zonaCampo;

                document.getElementById(name + "EventList").innerHTML += "<li>" + eventText + "</li>";

                //adicionar info do evento ao input field do jogador
                var eventValue = "$";
                eventValue += "MarcaGolo:" + marcaGolo;
                eventValue += "Festeja:" + festeja;
                eventValue += "FazCorte:" + fazCorte;
                eventValue += "BateBolaParada:" + bateBolaParada;
                eventValue += "FazFalta:" + fazFalta;
                eventValue += "Remata:" + remata;
                eventValue += "ZonaCampo:" + zonaCampo;

                document.getElementById("hiddenPlayersList").value += eventValue;

                //Limpar os inputs
                document.getElementById("cbGoal").checked = false;
                document.getElementById("cbCelebration").checked = false;
                document.getElementById("Tackle").value = "";
                document.getElementById("SetPieces").value = "";
                document.getElementById("Fault").value = "";
                document.getElementById("Shooting").value = "";
                document.getElementById("EventPlace").value = "";
            }
        }

        function addBall() {
            var ballPlaceElem = document.getElementById("BallPlace");
            var selectedPlaceIndex = ballPlaceElem.selectedIndex;
            var ballValue = ballPlaceElem.value;
            var ballText = ballPlaceElem.options[selectedPlaceIndex].innerHTML;
            if (ballValue != "N") {
                //adicionar na UI
                document.getElementById("ballsList").innerHTML += "<li>" + "Bola em " + ballText + "</li>";
                //guardar no hidden input list
                if (document.getElementById("hiddenBallsList").value != "" &&
                        document.getElementById("hiddenBallsList").value != undefined) {
                    document.getElementById("hiddenBallsList").value += "#";
                }
                else {
                    document.getElementById("hiddenBallsList").value = "";
                }

                document.getElementById("hiddenBallsList").value += "Place:" + ballValue + ";";

                //limpar os inputs da bola
                ballPlaceElem.value = "N";
            }
        }

        function submitForm() {
            try {
                document.forms["form1"].submit();
            }
            catch (err) {
                alert("submitForm: " + err.description);
            }
        }
            
    </script>
</head>
<body>
    <form id="form1" method="POST">
    <h1>
        Anotador</h1>
    <br />
    <div id="divGame">
        <h2>
            Jogo</h2>
        <b>Equipa 1</b>
        <input type="text" name="Team1Name" />
        <select name="Team1Type">
            <option value="">Nada</option>
            <option value="EquipaAtacante">Atacante</option>
            <option value="EquipaDefensiva">Defensiva</option>
        </select>
        <br />
        <b>Equipa 2</b>
        <input type="text" name="Team2Name" />
        <select name="Team2Type">
            <option value="">Nada</option>
            <option value="EquipaAtacante">Atacante</option>
            <option value="EquipaDefensiva">Defensiva</option>
        </select>
    </div>
    <br />
    <div id="divAddPlayerOrEventOrBall">
        <input id="buttonAddPlayer" type="button" value="Adicionar jogador" onclick="addPlayer();" />
        <input id="buttonAddEvent" type="button" value="Adicionar ocorrencia" onclick="addEvent();" />
        <input id="buttonAddBall" type="button" value="Adicionar bola" onclick="addBall();" />
    </div>
    <br />
    <div id="divPlayer">
        <h2>
            Jogador</h2>
        <input type="hidden" id="hiddenPlayersList" />
        <div id="divPlayersList">
            <ol id="playersList">
            </ol>
        </div>
        <b>Nome</b>
        <input type="text" id="PlayersName" />
        <br />
        <b>Equipa</b>
        <input type="text" id="PlayersTeam" />
        <br />
        <br />
        <div id="divEvent">
            <input type="checkbox" id="cbPlayerLeftFoot" value="LeftFoot" />Canhoto
            <input type="checkbox" id="cbGoal" value="Goal" />Marca golo
            <input type="checkbox" id="cbCelebration" value="Celebration" />Festeja
            <br />
            <br />
            Faz Corte
            <select name="Tackle">
                <option value="">Nada</option>
                <option value="Carrinho">Carrinho</option>
                <option value="CorteCabeca">Corte de Cabeca</option>
                <option value="Defesa">Defesa</option>
                <option value="Desarme">Desarme</option>
                <option value="Interseccao">Interseccao</option>
            </select>
            <br />
            Bate bolas parada
            <select name="SetPieces">
                <option value="">Nada</option>
                <option value="Canto">Canto</option>
                <option value="Livre">Livre</option>
                <option value="Penalti">Penalti</option>
            </select>
            <br />
            Faz Falta
            <select name="Fault">
                <option value="">Nada</option>
                <option value="Agressao">Agressao</option>
                <option value="Mao">Mao</option>
                <option value="Puxao">Puxao</option>
                <option value="Toque">Toque</option>
            </select>
            <br />
            Remata
            <select name="Shooting">
                <option value="">Nada</option>
                <option value="RemateCabeca">Cabeca</option>
                <option value="Remate">Pe</option>
            </select>
            <br />
            Zona do campo
            <select name="EventPlace">
                <option value="">Nada</option>
                <option value="Area">Area</option>
                <option value="Baliza">Baliza</option>
                <option value="LinhaFinal">Linha Final</option>
                <option value="MeioCampo">Meio Campo</option>
            </select>
        </div>
    </div>
    <div id="divBall">
        <h2>
            Bola</h2>
        <input type="hidden" id="hiddenBallsList" name="hiddenBallsList" />
        <div id="divBallsList">
            <ol id="ballsList">
            </ol>
        </div>
        Zona do campo
        <select name="BallPlace">
            <option value="N">Nada</option>
            <option value="Area">Area</option>
            <option value="Baliza">Baliza</option>
            <option value="LinhaFinal">Linha Final</option>
            <option value="MeioCampo">Meio Campo</option>
        </select>
        <br />
        <br />
    </div>
    <div id="divSubmit">
        <input id="buttonSubmit" type="button" value="Submeter" onclick="submitForm()" />
    </div>
    </form>
</body>
</html>
